<template>
	<div class="mine">
		<div class="header">
			<div class="title">
				<span>个人中心<router-link to="/editinfo" tag='i' class='editinfo'></router-link></span>
				<div class="picbox">
					<img :src="user.img">
				</div>
				<div class="username">
					{{user.name}}
				</div>
			</div>
			<div></div>
		</div>
		<div class="body">
			<van-cell-group>
				<van-cell is-link class='cell' to="/mine/setInfo">
					<template slot="title">
						<span><i class="iconfont icon-personal"></i>个人资料</span>
					</template>
				</van-cell>
				<van-cell title="我的赛事" is-link class='cell' to="/mine/newMatch">
					<template slot="title">
						<span><i class="iconfont icon-wangqiu"></i>我的赛事</span>
					</template>
				</van-cell>
				<van-cell title="我的数据" is-link class='cell' to="/mine/my_data">
					<template slot="title">
						<span><i class="iconfont icon-shuju"></i>我的数据</span>
					</template>
				</van-cell>
				<van-cell is-link class='cell' @click="toUmpire_apply">
					<template slot="title">
						<span class="icon_s"><img src="http://qncdn.tissys.com/mobile/static/img/toUmpire_apply.png" alt="" class="icon_u"><span>裁判申请</span></span>
					</template>
				</van-cell>
				<van-cell is-link class='cell' to="mine/organization_apply">
					<template slot="title">
						<span class="icon_s"><img src="http://qncdn.tissys.com/mobile/static/img/organization_apply.png" alt="" class="icon_u"><span>机构申请</span></span>
					</template>
				</van-cell>
			</van-cell-group>
		</div>
		<footer-com></footer-com>
	</div>
</template>
<script>
	import {
		Toast
	} from 'vant';
	export default {
		data() {
			return {
				title: '个人中心',
				activeKey: 0,
				user: {
					img: '',
					name: ''
				}
			}
		},
		mounted() {
			if(!localStorage.getItem("userInfo")){
				this.com_setInfo();
			}else{
				this.user = JSON.parse(localStorage.getItem("userInfo"))
				this.$store.dispatch('SET_USERINFO', this.user)
			}
		},
		methods: {
			toUmpire_apply() {
				this.$axios.get('/mobile/v1/PersonalCenter/my_info', {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					})
					.then(res => {
						if (res.data.code == 2000) {
							if (res.data.data.user_info.id_card) {
								this.$router.push({path:'mine/umpire_apply'})
							} else {
								Toast('请完善个人信息！')
								this.$router.push({
									path: 'mine/setInfo'
								})
							}
						}
					})
					.catch(res => {
						//console.log(res.msg);
					})
			},
			onChange(key) {
				this.activeKey = key;
			},
			com_setInfo() {
				this.$axios.get('/mobile/v1/PersonalCenter/my_info', {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					})
					.then(res => {
						if (res.data.code == 2000) {
							this.user = res.data.data.user_info
							this.$store.dispatch('SET_SEX', res.data.data.user_info.sex)
							localStorage.setItem("userInfo", JSON.stringify(res.data.data.user_info))
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					})
			},
		}
	}
</script>
<style lang="less" scoped>
	.icon_s {
		display: flex;
	}

	.icon_u {
		display: inline-block;
		width: 0.4rem;
		height: 0.4rem;
		margin-right: .3rem;
	}

	.mine {
		margin-bottom: 1.1rem;

		.header {
			width: 100%;
			height: 4.2rem;
			background: url('http://tennis.laigl.com/mobile/static/img/bg_mine.png') no-repeat;
			background-size: 100% 100%;

			.title {
				text-align: center;
				height: 0.9rem;
				line-height: 0.9rem;
				color: #fff;
				font-size: 0.32rem;
				font-weight: 600;
				position: relative;

				.editinfo {
					position: absolute;
					right: 0;
				}

				.picbox {
					width: 1.4rem;
					height: 1.4rem;
					border: 0.04rem solid #fff;
					border-radius: 50%;
					position: absolute;
					left: 50%;
					margin-left: -0.7rem;
					margin-top: 0.2rem;

					img {
						display: inline-block;
						width: 1.4rem;
						height: 1.4rem;
						border-radius: 50%;
					}
				}

				.username {
					font-size: 0.32rem;
					// width: 1.4rem;
					width: 100%;
					position: absolute;
					left: 50%;
					// margin-left: -0.7rem;
					margin-left: -50%;
					margin-top: 1.8rem;
				}
			}
		}

		.body {
			background-color: #f6f6f6;

			.cell {
				background-color: #f6f6f6;
				text-align: left;

				.iconfont {
					font-size: 0.4rem;
					margin-right: 0.3rem;
					line-height: 0.4rem;
				}
			}
		}
	}
</style>
